<template>
  <HeaderNav active-index="6"></HeaderNav>
  <TaskContainer>
    <div class="toolbar">
      <el-button type="primary" @click="addStage">添加阶段
        <template #icon>
          <el-icon>
            <CirclePlus/>
          </el-icon>
        </template>
      </el-button>
      <el-button type="danger" @click="batchRemove">批量删除
        <template #icon>
          <el-icon>
            <Delete/>
          </el-icon>
        </template>
      </el-button>
    </div>
    <el-table :data="list" style="width: 100%" border ref="tb">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="id" label="序号"/>
      <el-table-column prop="name" label="阶段名"/>
      <el-table-column label="录入时间">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon>
              <timer/>
            </el-icon>
            <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" prop="update_time"/>
      <el-table-column fixed="right" label="操作" width="140">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </TaskContainer>
</template>

<script>
import HeaderNav from "@/components/HeaderNav.vue"
import TaskContainer from "@/components/TaskContainer.vue"
import Condition from "@/components/Condition.vue"

export default {
  components: {
    HeaderNav,
    TaskContainer,
    Condition,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          create_time: '2016-05-03 11:22:33',
          update_time: '2016-05-04 11:22:33',
          name: '第一阶段',
        },
        {
          id: 2,
          create_time: '2016-05-03 11:22:33',
          update_time: '2016-05-04 11:22:33',
          name: '第二阶段',
        },
      ]
    }
  },
  methods: {
    addStage(event) {
      this.$layer.open({
        type: 2,
        title: '添加阶段',
        shadeClose: true,
        shade: 0.5,
        area: ['460px', '200px'],
        btn: ['保存', '关闭'],
        content: '/stage/add',
        yes: (index, layero) => {
          layer.close(index);
        }
      })
    },
    batchRemove(event) {
      let rows = this.$refs.tb.getSelectionRows();
      console.log(rows);
    }
  }
}
</script>

<style scoped>
.table-modules {
  padding: 10px 20px;
}

.table-modules span {
  padding: 2px 10px;
  margin: 0 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.toolbar {
  position: relative;
  right: 10px;
  z-index: 200;
  text-align: right;
  margin: 20px;
  flex: 1 1 auto;
}
</style>